<template>
  <div class="container">
    <el-card style="position: relative">
      <RouterHeader :title="'会议通知'"></RouterHeader>
      <div class="content">
        <el-form
          ref="ruleFormRef"
          :model="form"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="会议名称" prop="meetingName">
            <el-input
              class="input-item"
              v-model="form.meetingName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="会议时间" prop="meetingTime">
            <el-date-picker
              v-model="form.meetingTime"
              type="datetime"
              placeholder="选择时间"
              style="width: 100%"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="会议名称" prop="meetingName">
            <el-input
              class="input-item"
              v-model="form.meetingName"
              placeholder="请输入"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="会议参加人员">
            <approver
              ref="approverRef"
              :approverList="form.processCheckBo.copyFor"
              :typeId="3"
              @handleChooseapprover="handleChooseapproverCc"
              :flag="true"
              :mark="false"
            />
          </el-form-item>
          <!-- <el-form-item label="会议记录员">
            <approver
              :typeId="3"
              :approverList="form.processCheckBo.checkPeopleIds"
              @handleChooseapprover="handleChooseapprover"
              :mark="false"
            ></approver>
          </el-form-item> -->

          <el-form-item label="会议文件" prop="meetingLogs">
            <fileupload
              :modelValue="form.meetingLogs"
              @update:modelValue="handleModelValueUpdate"
            ></fileupload>
          </el-form-item>
          <el-form-item style="position: absolute; bottom: 20px; right: 20px">
            <el-button type="primary" @click="resetForm(ruleFormRef)"
              >发布</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import RouterHeader from "@/components/RouterHeader";
import { ref, reactive, onMounted, nextTick } from "vue";
import approver from "@/components/ApproveMeet/approver.vue";
import fileupload from "@/components/FileUpload";
import { addMertingApi } from "@/api/meeting/index";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
const router = useRouter();
const route = useRoute();

const approverRef = ref();
const userStore = useUserStore();
const form = reactive({
  meetingTime: "", // 会议时间
  meetingName: "", // 会议名称
  processCheckBo: {
    checkPeopleIds: [], //会议记录人id列表
    copyFor: [], //参加会议人id列表
  },
  meetingLogs: [], // 会议记录
});
const ruleFormRef = ref();
const rules = {
  meetingTime: [{ required: true, message: "请选择会议时间", trigger: "blur" }],
  meetingName: [{ required: true, message: "请输入会议名称", trigger: "blur" }],
};
// 审批人
// const handleChooseapprover = (id) => {
//   if (id) {
//     form.processCheckBo.checkPeopleIds = id;
//   }
// };
// 抄送人
let currentId = ref();
const handleChooseapproverCc = (id) => {
  if (id && id[0] === userStore.userId) {
  } else {
    form.processCheckBo.copyFor = id;
  }
};
// 成功调取上传文件接口 上传会议记录
const handleModelValueUpdate = (val, result, operationType) => {
  if (operationType === "success") {
    if (result) {
      form.meetingLogs = [];
      result.forEach((item)=>{
        form.meetingLogs.push(item);
      });
    }
  } else if (operationType === "delete") {
    form.meetingLogs.splice(result, 1);
  }
};
// 发布
const resetForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let data = {
        meetingTime: form.meetingTime,
        meetingName: form.meetingName,
        meetingJoinUserIdList: form.processCheckBo.copyFor.map(
          (item) => item.userId
        ),
        // meetingRecoderUserIdList: form.processCheckBo.checkPeopleIds.map(
        //   (item) => item.userId
        // ),
        fileList: form.meetingLogs,
      };
      const res = await addMertingApi(data);
      if (res.code === 200) {
        ElMessage.success("添加会议成功");
        router.go(-1);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
onMounted(() => {
  setTimeout(() => {
    if (route.query.name === "1") {
      form.processCheckBo.copyFor.push(approverRef.value.currentPerson);
      //console.log( form.processCheckBo.copyFor,'--- form.processCheckBo.copyFor---')
    }

    // console.log(form.processCheckBo.copyFor);
  }, 1000);
});
</script>
<style scoped lang="scss">
.container {
  padding: 20px;
  .content {
    margin-top: 20px;
  }
}
</style>
